<!-- 添加模板 -->
<template>
    <div class='bgff h100 pd pt10 case-context pr'>
        <p class="title-label">添加模板</p>
        <div class="context-page-case mt20 ">
            <n-form :model="form" :rules="rules" ref="formRef" label-width="120" :inline="false" size="normal"
                label-placement="left">
                <n-grid :cols="24" :x-gap="20" :y-gap="20">
                    <n-form-item-gi label="标题:" path="title" span="12">
                        <n-input v-model:value="form.title" type="text" placeholder="请输入标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi label="备注:" path="remark" span="12">
                        <n-input v-model:value="form.remark" type="text" placeholder="请输入标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>

                    <n-form-item-gi label="LOGO:" path="logo" span="10">
                        <div class="logo-context vertical-center " @click="photoShowModal = true">
                            <img :src="form.zlogo" class="w100 h100 imgpm" v-if="form.zlogo" />
                            <span v-else>点击上传LOGO</span>
                        </div>
                    </n-form-item-gi>


                    <n-form-item-gi label="网页背景图:" span="13" path="backgroundImage">
                        <div class="logo-context vertical-center ac" @click="photoShowModalfooter = true">
                            <img :src="form.backgroundImage" class="w100 h100 imgjz" v-if="form.backgroundImage" />
                            <span v-else>点击上传网页背景图</span>
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi class="" label="整体介绍:" span="24">
                        <div class="fwbclass ">
                            <tinymce ref="tinymceref"></tinymce>
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi label="作品:"  span="24">
                        <div class="jjnmjxeerrw">
                            <div v-for="(item, idx) in form.production" :key="idx" class="dfsdfsdtrwxe">
                                <n-input v-model:value="item.url" type="text" placeholder="请输入跳转地址" size="medium"
                                    clearable @change=""></n-input>

                                <div class="pr">
                                    <img :src="item.backgroundImage" class="imgjz w100 sdfsdfdsrt" />
                                    <div class="kkmmelkmnjxer vertical-center">
                                        <span>
                                            <i class="iconfont  cf fz40 dx-edit" @click="bianjier(item, idx)"></i>
                                            <i class="iconfont dx-shanchu cf fz40 ml20" @click="delezpewe(idx)"></i>
                                        </span>
                                    </div>
                                </div>
                                <p class="fz14 dian  z3">
                                    {{ item.title }}
                                </p>
                                <p class="fz12 dianer z9">
                                    {{ item.subheading }}
                                </p>
                                <p class="fz12 z9">
                                    {{ item.addTime }}更新
                                </p>
                            </div>
                            <div class="addZpbox z9 vertical-center sz" @click="shoujwer">
                                点击添加作品
                            </div>
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi label="服务伙伴:"  span="24">
                        <div class="jjnmjxeerrw">
                            <div class="kjnmmxddrtw vertical-center pr" v-for="(item, idx) in form.Servicepartner"
                                :key="idx">
                                <img :src="item" class="" />
                                <div class="kkmmelkmnjxer vertical-center">
                                    <span>
                                        <i class="iconfont dx-shanchu cf fz40 ml20" @click="sddertwewr(idx)"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="jnnjmjkxhjnsd vertical-center" @click="photoShowModalwu = true">
                                点击添加服务伙伴
                            </div>
                        </div>

                    </n-form-item-gi>
                </n-grid>
            </n-form>

            <div style="width:700px">
                <p class="mt20">
                招募令：
            </p>
            <n-dynamic-input v-model:value="form.Recruitmentorder" :on-create="onCreate" show-sort-button>
                <template #create-button-default>
                    点击新建招募令
                </template>
                <template #default="{ value }">
                    <div style="display: flex; align-items: center; width: 100%">
                        <p style="width:200px">
                            <n-input v-model:value="value.label" placeholder="请输入标签"/>
                        </p>
                        <n-input v-model:value="value.value" class="ml20" placeholder="请输入招聘地址"/>
                    </div>
                </template>
            </n-dynamic-input>
            </div>
        </div>
        <n-modal v-model:show="photoShowModalfooter" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>网页背景图</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsan" types="动态网页背景图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalfooter = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsan"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModalfootsi" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>作品封面</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsi" types="作品封面"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalfootsi = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsi"> 确定 </n-button>
                </div>
            </template>
        </n-modal>



        <div class="manipulation-menu cen vertical-center">
            <div class="sdfsdttyer">
                <n-button class="caozjker" type="primary" size="medium" @click="handleValidateClick">保存</n-button>
                <n-button class="caozjker ml20" type="error" size="medium" @click="callBack">返回</n-button>
            </div>
        </div>




        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>logo</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="cyyxlogo"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>



        <n-modal v-model:show="photoShowModalwu" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>logo</div>
            </template>
            <div>
                <photoGallery @getImg="getImgwu" types="cyyxlogo"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalwu = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgwu"> 确定 </n-button>
                </div>
            </template>
        </n-modal>



        <n-modal v-model:show="newsAndTrendsM" preset="card" style="width: 1200px">
            <template #header>
                <div>
                    添加作品
                </div>
            </template>
            <div>
                <n-tabs type="line" animated :default-value="okay">
                    <n-tab-pane name="1" tab="作品列表">
                        <div class="kkmdfsdtywer">
                            <contentList pup="1" ref="lisPupfun" @callBack="newsTrendscallback"></contentList>
                        </div>
                    </n-tab-pane>
                    <n-tab-pane name="2" tab="站外">
                        <div class="kkmdfsdtywer">
                            <div class="display-flex">
                                <div class="zjjbhsdd-img vertical-center sz" @click="photoShowModalfootsi = true">
                                    <img :src="zpObj.backgroundImage" v-if="zpObj.backgroundImage"
                                        class="w100 h100 imgjz" />
                                    <span class="z9" v-else>点击上传封面</span>
                                </div>
                                <div class="flex-1 ml20">
                                    <p>
                                        <!-- v-model:value="" -->
                                        <n-input v-model:value="zpObj.title" type="text" placeholder="请输入标题"
                                            size="medium" clearable></n-input>

                                    </p>
                                    <p class="mt10">
                                        <n-input type="textarea" placeholder="请输入副标题" size="medium" clearable
                                            v-model:value="zpObj.subheading"></n-input>

                                    </p>
                                    <p class="mt10">
                                        <n-input type="text" placeholder="请输入跳转链接" size="medium" clearable
                                            v-model:value="zpObj.url"></n-input>
                                    </p>
                                    <p class="mt10" v-if="!iszpsd">
                                        <n-date-picker v-model:value="zpObj.addTime" type="date" size="medium"
                                            placeholder="请输入更新时间">
                                        </n-date-picker>
                                    </p>
                                    <p class="mt40">
                                        <n-button type="primary" size="medium" @click="addZpBtn">确认{{
                                            iszpsd?'修改': '添加'
                                        }}</n-button>

                                    </p>
                                </div>
                            </div>
                        </div>
                    </n-tab-pane>


                </n-tabs>



            </div>

            <template #action>
                <div class="tr">
                    <n-button @click="newsAndTrendsM = false"> 取消 </n-button>
                </div>
            </template>
        </n-modal>


    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import photoGallery from "../../../components/util/photoGallery";
import { callBack, dxpost, qurl, dxget, transferTimeYMD } from "../../../util/index"
import tinymce from "../../../components/util/tinymce.vue"
import contentList from "../content/list.vue"
const cz = qurl()
const photoShowModal = ref(false)
const photoShowModalfooter = ref(false)
const photoShowModalfootsi = ref(false)
const photoShowModalwu = ref(false)
const tinymceref = ref()
const classifyoptions = ref([])
const formRef = ref()
const isBj = ref(false)
const newsAndTrendsM = ref(false)
const okay = ref('1')
const iszpsd = ref(false) // 作品是否为编辑的状态
const form = ref({
    title: "",
    remark: "",
    zlogo: "",
    backgroundImage: "",
    overalintroduction: "",//整体介绍
    production: [],//作品
    Servicepartner: [],//服务商
    Recruitmentorder: []//招募令
})

const zpObj = ref({
    title: '',
    subheading: '',
    backgroundImage: '',
    addTime: null,
    url: ''
})
const rules = {
    title: {
        required: true,
        message: '请输入标题',
        trigger: 'blur'
    },
    remark: {
        required: true,
        message: '请输入副标题',
        trigger: 'blur'
    },
    backgroundImage: {
        required: true,
        message: '请上传背景图',
        trigger: 'blur'
    },
    zlogo: {
        required: true,
        message: '请上传logo',
        trigger: 'blur'
    },
}

let jjnmnxesan = "";
const getImgsan = (data) => {
    jjnmnxesan = data;
};
const setImgsan = () => {
    form.value.backgroundImage = jjnmnxesan;
    photoShowModalfooter.value = false;
};


let jjnmnxesi = "";
const getImgsi = (data) => {
    jjnmnxesi = data;
};
const setImgsi = () => {
    zpObj.value.backgroundImage = jjnmnxesi;
    photoShowModalfootsi.value = false;
};

let jjnmnxewu = "";
const getImgwu = (data) => {
    jjnmnxewu = data;
};
const setImgwu = () => {
    form.value.Servicepartner.push(jjnmnxewu)
    photoShowModalwu.value = false;
};


let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    form.value.zlogo = jjnmnxe;
    photoShowModal.value = false;
};
const handleValidateClick = (e) => {
    e.preventDefault();
    form.value.overalintroduction = tinymceref.value.getContent().trim()
    let apitype = "post"
    if (isBj.value) {
        apitype = 'put'
    }
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            if (!form.value.overalintroduction) {
                window.$message.error("请输入整体介绍")
                return
            }
            const jkjhnse = JSON.parse(JSON.stringify(form.value))
            jkjhnse.production = JSON.stringify(jkjhnse.production)
            jkjhnse.Servicepartner = JSON.stringify(jkjhnse.Servicepartner)
            jkjhnse.Recruitmentorder = JSON.stringify(jkjhnse.Recruitmentorder)
            const { errno }: any = await dxpost('cyyx/cyyxtemplate', jkjhnse, apitype)
            if (errno == 0) {
                callBack()
            }
        }
    });
}
const initData = async () => {
    const { data }: any = await dxget("cyyx/cyyxtemplate", { id: cz.id })
    data.production = JSON.parse(data.production)
    data.Servicepartner = JSON.parse(data.Servicepartner)
    data.Recruitmentorder = JSON.parse(data.Recruitmentorder)

    form.value = data
    tinymceref.value.setContent(data.overalintroduction)
}
if (cz.id) {
    isBj.value = true
    initData()
}

const newsTrendscallback = async (ids) => {
    const { data }: any = await dxget("cyyx/zpgl?id=" + ids)
    data.map(a => {
        form.value.production.push(a)
    })
    newsAndTrendsM.value = false
}
const delezpewe = (idx) => {
    form.value.production.splice(idx, 1)
}
const shoujwer = () => {
    iszpsd.value = false
    okay.value = "1"
    newsAndTrendsM.value = true
    zpObj.value = {
        title: '',
        subheading: '',
        backgroundImage: '',
        addTime: null,
        url: ''
    }

    okay.value = "1"
}
const addZpBtn = () => {
    if (iszpsd.value) {
        newsAndTrendsM.value = false
        return
    }
    if (!zpObj.value.backgroundImage) {
        window.$message.error("请上传封面！")
        return
    }
    if (!zpObj.value.title) {
        window.$message.error("请输入标题！")
        return
    }
    if (!zpObj.value.subheading) {
        window.$message.error("请输入副标题！")
        return
    }
    if (!zpObj.value.url) {
        window.$message.error("请输入跳转链接！")
        return
    }
    if (!zpObj.value.addTime) {
        window.$message.error("请输入更新时间！")
        return
    }
    const kjnkxje = JSON.parse(JSON.stringify(zpObj.value))
    kjnkxje.addTime = transferTimeYMD(kjnkxje.addTime)
    form.value.production.push(kjnkxje)
    console.log(kjnkxje);
    newsAndTrendsM.value = false

}
const bianjier = (item, idx) => {
    newsAndTrendsM.value = true
    okay.value = "2"
    iszpsd.value = true
    zpObj.value = item
}
const sddertwewr = (idx) => {
    form.value.Servicepartner.splice(idx, 1)
}


const onCreate = () => {
    return {
        label: '',
        value: ''
    }
}
</script>
<style scoped>
.context-page-case {
    width: 1260px;
}

.fwbclass {
    height: 300px;
}

.logo-context {
    border: 1px dashed #999;
    width: 250px;
    height: 100px;
    text-align: center;
    color: #999;
    cursor: pointer;
    background: #e0e0e0;
}

.logo-context.ab {
    width: 94px;
    height: 94px;
}

.logo-context.ac {
    width: 600px;
    height: 300px;
}

.case-context {
    overflow: auto;
    padding-bottom: 150px;
}

.manipulation-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #fff;
    z-index: 999;
}

.caozjker {
    width: 150px;
}


.jjnmjxeerrw {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px
}

.sdfsdfdsrt {
    height: 200px;
}

.dianer {
    max-height: 40px !important;
}

.addZpbox {
    background: #f8f8f8;
    height: 200px;
}

.kkmmelkmnjxer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: none;
    cursor: pointer;
}

.kjnmmxddrtw:hover .kkmmelkmnjxer,
.dfsdfsdtrwxe:hover .kkmmelkmnjxer {
    display: flex;
}

.kkmdfsdtywer {
    height: 600px;
    overflow: auto;
}

.zjjbhsdd-img {
    width: 300px;
    height: 300px;
    background: #f8f8f8;
}

.zjjbhsdd-img img {
    border-radius: 4px;
}

.jnnjmjkxhjnsd {
    height: 70px;
    background: #f8f8f8;
    cursor: pointer;
}

.kjnmmxddrtw {
    height: 70px;
    background: #1d1d1d;
    border: 8px solid #2f2f2f;
}

.kjnmmxddrtw img {
    height: 35px;
    width: auto;
}
</style>